<template>
  <div class="total">
    <div class="titleShadow t-title">滴灌</div>
    <div class="tablemain">
      <el-table
        :data="tableMain"
        style="width: 100%"
        :border="false"
        table-layout="fixed"
        height="100%"
        stripe
        ref="reportTable"
      >
        <el-table-column prop="num" label="项目编号" />
        <el-table-column prop="name" label="地块位置" />
        <el-table-column prop="area" label="面积">
          <template #default="scope"> {{ scope.row.area }}亩 </template>
        </el-table-column>
        <el-table-column fixed="right" label="详情" width="100">
          <template #default>
            <div class="btns">
              <el-button link type="primary" size="small">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

let tableMain = ref([
  {
    num: "N8491031",
    name: "晋州市总十庄镇永丰村",
    area: "1200",
  },
  {
    num: "N8491032",
    name: "晋州市总十庄镇永丰村",
    area: "1000",
  },
  {
    num: "N8491033",
    name: "晋州市周家庄乡",
    area: "2000",
  },
  {
    num: "N8491034",
    name: "晋州市桃园镇张家村",
    area: "800",
  },
  {
    num: "N8491035",
    name: "晋州市东里庄镇",
    area: "2500",
  },
  {
    num: "N8491036",
    name: "晋州市东卓宿镇",
    area: "1500",
  },
  {
    num: "N8491037",
    name: "晋州市营里镇",
    area: "2000",
  },
]);
const reportTable = ref();
onMounted(() => {
  setTimeout(() => {
    scroll(reportTable.value.$refs.bodyWrapper);
  }, 1000);
});
const scroll = (tableBody: {
  getElementsByClassName: (arg0: string) => any[];
}) => {
  let isScroll = true;
  let dom1 = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];

  if (dom1.clientHeight < dom1.scrollHeight) {
    let copy = dom1.querySelector(".el-scrollbar__view").cloneNode(true);
    dom1.appendChild(copy);

    //鼠标放上去，停止滚动；移开，继续滚动
    dom1.addEventListener("mouseover", () => {
      isScroll = false;
    });
    dom1.addEventListener("mouseout", () => {
      isScroll = true;
    });

    setInterval(() => {
      if (isScroll) {
        dom1 = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
        dom1.scrollTop += 1;
        if (
          (dom1.clientHeight + dom1.scrollTop).toFixed(0) >=
          dom1.scrollHeight - 3
        ) {
          // dom1.scrollTop = 0;
          let copy = dom1.querySelector(".el-scrollbar__view").cloneNode(true);
          dom1.appendChild(copy);
          let child = dom1.querySelectorAll(".el-scrollbar__view")[0];
          dom1.removeChild(child);
        }
      }
    }, 100);
  }
};
</script>

<style scoped lang="scss">
.total {
  height: calc(100% - 20px - 269px);
  margin-top: 20px;

  .t-title {
    padding-left: 20px;
    font-size: 24px;
    line-height: 40px;
    background: url("@/assets/construct/module_title_bg.png") no-repeat;
  }

  .tablemain {
    height: calc(100% - 40px);
    padding: 10px;

    ::v-deep(.el-table th.el-table__cell) {
      padding: 1px 0;
      font-size: 14px;
      font-weight: bold;
      color: #9dbaf5;
      background-color: transparent;
    }

    ::v-deep(.el-table) {
      background-color: transparent;

      td.el-table__cell,
      th.el-table__cell.is-leaf {
        border: 0;
      }

      .el-table__inner-wrapper {
        &::before {
          background-color: #000;
        }
      }

      .el-table__header {
        background: rgb(28 99 232 / 10%);
        background-size: 100% 100%;

        thead {
          height: 40px;

          tr {
            font-size: 16px;
            background-color: transparent;
          }
        }
      }

      .el-table__row {
        font-size: 14px;
        color: #fff;
        background: rgb(28 99 232 / 4%);

        td {
          background: transparent !important;
          border-bottom: 5px solid transparent;
        }
      }

      .el-table__row--striped {
        background-color: transparent;
      }
    }

    .btns {
      display: inline-block;
      padding: 0 10px;
      background-color: rgb(23 133 129 / 32%);
      border-radius: 4px;

      button {
        color: #fff;
      }
    }
  }
}
</style>
